<template>
  <div>
    app根组件
    <!--router-view路由出口,显示组件的配置-->
    <!--router-view相当于占位符,匹配路径成功会显示对应的组件-->
    <!--
      页面
    -->
    <ul>
      <li>
        <!-- <a href="#/">我是一</a> -->
        <!--
          [一]
        router-link声明式导航就是a标签跳转
          1.无论是hash值还是histroy,都可以解析
          2.router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
          3.router-link提供了声明式导航高亮的功能(自带类名)
          [二]
          router-link的两种传参方式,
          1.问号传参:/path?参数名=值 接收方式:this.$route.query.参数名
          2.路径传参:/path/值    需要路由对象提前配置path:'/three/:name',
           接收方式this.$route.params.参数名
          3.两种方式混合使用时,params传参要写前面,query传参写后面
          4.使用:to={}对象格式时,params传参需要使用name来匹配组件,而query两者都可以
        -->
        <!-- <router-link to="/?id=1&name=喷火龙">我是一</router-link> -->
        <router-link :to="{ path: '/', query: { id: '1', name: '喷火龙' } }"
          >我是一</router-link
        >
      </li>
      <li>
        <!-- <a href="#/two">我是二</a> -->
        <!-- <router-link to="/two/?id=2&name=杰尼龟">我是二</router-link> -->
        <router-link :to="{ name: 'two', query: { id: 2, name: '杰尼龟' } }"
          >我是二</router-link
        >
      </li>
      <li>
        <!-- <a href="#/three">我是三</a> -->
        <!-- <router-link to="/three/3/李云龙?jineng=喷火&level=团长">我是三</router-link
        > -->
        <router-link
          :to="{
            name: 'three',
            params: { id: 3, name: '李云龙', age: '46' },
            query: { jineng: '意大利炮', level: '团长' },
          }"
          >我是三</router-link
        >
      </li>
    </ul>
    <hr />
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
ul {
  display: flex;
  list-style: none;
  li {
    margin: 30px;
  }
}
.router-link-exact-active {
  color: skyblue;
}
</style>
